<template>
  <div>
    <el-dialog
      title="主动退款"
      :visible.sync="dialogVisible"
      width="750px"
      :close-on-click-modal="false"
      append-to-body
      @close="close"
    >
      <el-form
        v-if="detail"
        ref="form"
        v-loading="loading"
        size="small"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="订单编号：">{{ detail.orderNo }}</el-form-item>
        <el-form-item label="下单时间：">{{ detail.createTime }}</el-form-item>
        <el-form-item label="下单顾客：">{{ detail.memberName || detail.downName }}<span v-if="detail.downPhone">（{{ detail.downPhone }}）</span></el-form-item>
        <el-form-item label="退款原因：" prop="reason">
          <el-input
            v-model="form.reason"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            maxlength="100"
            show-word-limit
          />
          <span style="color: #DB3535">*确认取消将向会员原路退回实收金额{{ detail.payFee / 100 }}元余额</span>
        </el-form-item>
        <!-- <el-divider /> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="flexCCC">
          <el-button
            size="large"
            round
            type="primary"
            class="btn-submit"
            :disabled="loading"
            @click="showPwdModal"
          >确认退款</el-button>
          <el-button size="text" round :disabled="loading" @click="hide">取 消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 验证登录密码 -->
    <el-dialog
      title="验证身份"
      :visible.sync="pwdVisible"
      append-to-body
      width="40%"
    >
      <el-form ref="form" :model="refundForm" label-width="80px">
        <el-form-item label="登录密码">
          <el-input v-model="refundForm.pwd" size="small" placeholder="请输入登录密码" />
          <span>*验证登录密码成功后会直接发起退款</span>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="pwdVisible = false">取消</el-button>
          <el-button type="primary" size="small" @click="validPwd">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { orderCancel } from '@/api/reservation.js'
import { chkLoginPwd } from '@/api/payCenter'
import confirmMessage from '@/components/ConfirmMessage/index'
export default {
  data() {
    return {
      // 校验字段
      rules: {
        // trackingNo: [
        //   {
        //     required: true,
        //     message: "请输入物流单号",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      loading: false,
      pwdVisible: false,
      // 数据
      refundForm: {
        pwd: ''
      },
      detail: null,
      form: {
        orderNo: null,
        reason: null
      }
    }
  },
  methods: {
    /**
       * 弹框相关
       */
    open({ detail }) {
      this.detail = detail
      console.log('detail', detail)
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.form = {
        orderNo: null,
        reason: null
      }
      this.loading = false
      this.$refs.form.resetFields()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
       * 数据组
       */

    /**
       * 按钮组
       */
    showPwdModal() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.detail.fapiaoSts && confirmMessage({ title: '退款发票自动冲红提示', center: true })
            .then(() => {
              this.pwdVisible = true
            })
            .catch(() => {
              console.log('我是取消')
            })
          !this.detail.fapiaoSts && (this.pwdVisible = true)
        }
      })
    },
    validPwd() {
      const { pwd } = this.refundForm
      if (!pwd) {
        this.$message.error('请输入登录密码')
        return
      }
      // 校验登录密码
      chkLoginPwd({ password: pwd }).then(res => {
        console.log('res', res)
        this.pwdVisible = false
        this.submit()
      })
    },
    // 确 定
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.form.orderNo = this.detail.orderNo
          orderCancel(this.form)
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '订单已取消',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.resolve && this.resolve()
              this.hide()
            })
            .catch((err) => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .w-400 {
    width: 400px;
    display: block;
    margin: 0 auto;
  }
  .btn-submit {
    margin-bottom: 20px;
  }
</style>
